<template>
  <view class="container">
    <!-- 左侧分类 -->
    <scroll-view class="left-category" scroll-y>
      <view
          v-for="category in parentCategories"
          :key="category.id"
          :class="['category-item', { active: activeCategoryId === category.id }]"
          @click="selectCategory(category.id)"
      >
        {{ category.title }}
      </view>
    </scroll-view>

    <!-- 右侧子分类和商品 -->
    <scroll-view class="right-content" scroll-y>
      <view v-for="subCategory in activeSubCategories" :key="subCategory.id">
        <view class="sub-category-title">{{ subCategory.title }}</view>
        <view class="product-list">
          <view
              v-for="product in subCategory.products"
              :key="product.id"
              class="product-item"
              @click="showProductDetail(product.id)"
          >
            <image :src="product.image" mode="aspectFill"></image>
            <view class="product-info">
              <text class="product-name">{{ product.name }}</text>
              <text class="product-price">￥{{ product.price }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      parentCategories: [], // 父分类数据
      subCategories: [], // 子分类数据
      products: [], // 商品数据
      activeCategoryId: null, // 当前选中的父分类ID
    };
  },
  computed: {
    // 当前选中的父分类下的子分类
    activeSubCategories() {
      if (!this.activeCategoryId) return [];

      // 找到当前父分类下的子分类
      const subCategories = this.subCategories.filter(
          (sub) => sub.parentId === this.activeCategoryId
      );

      // 将商品数据关联到子分类中
      return subCategories.map((sub) => ({
        ...sub,
        products: this.products.filter((product) => product.categoryId === sub.id)
      }));
    },
  },
  methods: {
    // 选择父分类
    selectCategory(categoryId) {
      this.activeCategoryId = categoryId;
    },
    // 加载数据
    async loadData() {
      const res = await uni.request({
        url: 'http://localhost:8080/app/shop/subject/list',
        method: 'GET'
      });
      const res2 = await uni.request({
        url: 'http://localhost:8080/app/shop/item/list',
        method: 'GET'
      });
      let list = res[1].data.rows;
      this.products = res2[1].data.rows;

      list.forEach(item => {
        if (item.parentId === 0) {
          this.parentCategories.push(item);
        } else {
          this.subCategories.push(item);
        }
      });
      console.log("分类：",this.parentCategories)
      console.log("分类：",this.subCategories)
      console.log("商品：",this.products)

      // 默认选中第一个父分类
      if (this.parentCategories.length > 0) {
        this.activeCategoryId = this.parentCategories[0].id;
      }
    },
    // 显示商品详情
    showProductDetail(productId) {
      console.log("商品id：", productId);

      // 校验用户是否登录
      const token = uni.getStorageSync('token'); // 假设登录后会将 token 存储在本地
      if (!token) {
        // 用户未登录，弹出提示并跳转到登录页
        uni.showToast({
          title: '用户未登录，请先登录',
          icon: 'none',
          duration: 2000
        });

        // 跳转到登录页
        uni.navigateTo({
          url: '/pages/public/login' // 假设登录页路径为 /pages/login/login
        });
        return; // 阻止跳转到商品详情页
      }

      // 用户已登录，正常跳转
      uni.navigateTo({
        url: `/pages/product/productDetail?id=${productId}`
      });
    }
  },

  async onLoad() {
    await this.loadData();
  },

};
</script>

<style scoped>
.container {
  display: flex;
  height: 100vh;
}

.left-category {
  width: 200rpx;
  background-color: #f8f8f8;
}

.category-item {
  padding: 20rpx;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.category-item.active {
  background-color: #fff;
  color: #007aff;
}

.right-content {
  flex: 1;
  padding: 20rpx;
}

.sub-category-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  width: 48%;
  margin-bottom: 20rpx;
}

.product-item image {
  width: 100%;
  height: 200rpx;
  border-radius: 10rpx;
}

.product-info {
  padding: 10rpx;
}

.product-name {
  font-size: 28rpx;
  color: #333;
}

.product-price {
  font-size: 24rpx;
  color: #ff5000;
}
</style>
